import React, { Component } from 'react';
import IconRanking from '../images/ranking.png'
import IconArrow from '../images/arrow_right.png'

class RecommendHeader extends Component {

    constructor(props, context) {
        super(props, context);
        this.clickMore = this.clickMore.bind(this);

        const groupId = this.props.groupId;
        const imageUrl = this.props.imageUrl;
        const title = this.props.title;
        let url = IconRanking;
        if (imageUrl) {
            url = imageUrl;
        }
        this.state = {
            url: url,
            title: title,
            groupId: groupId
        };
    }

    // 点击更多
    clickMore() {
        const groupId = this.state.groupId;
        this.props.handleClickMore(groupId);
    }

    render() {
        return (
            <div style={styles.root}>
                <div style={styles.left}>
                    <div style={styles.left_img}>
                        <img src={this.state.url} style={{ height: '24px', marginLeft: '16px' }} alt='' />
                    </div>
                    <div style={{width:'100px',height:'100%',textAlign:'center',display:'flex',alignItems:'center',marginLeft:'12px'}} >{this.state.title}</div>
                </div>
                <div style={styles.right} onClick={this.clickMore.bind(this)}>
                    <div style={styles.right_p}>
                        <p>更多</p>
                    </div>
                    <div style={styles.right_img}>
                        <img src={IconArrow} style={{ width: '12px', height: '12px' }} alt='' />
                    </div>
                </div>
            </div>
        );
    }
}
export default RecommendHeader;

const headerHeight = '50px';
const styles = {
    root: {
        width: '100%',
        height: headerHeight,
        background: 'white',
        display: 'flex',
    },
    left: {
        width: '100%',
        height: headerHeight,
        display: 'flex'
    },
    left_p: {
        color: '#212121',
        height: '30px',
        marginLeft: '8px',
        marginTop: '14px',
        fontWeight: 800
    },
    left_img: {
        width: '30px',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex'
    },

    right: {
        width: '50px',
        height: '100%',
        display: 'flex',

    },
    right_p: {
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex',
        fontSize: '12px',
        color: '#757575',
        width: '30px',
        height: '100%',
    },
    right_img: {
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex',
        width: '20px',
        height: '100%',
    }
}